<template>
        <div class="content-right" v-loading="loading" >
            <template v-if="total">
                <div class="content-item" v-for="item in contentList" :key="item.id" @click="handleToDetail(item)">
                    <div class="title">{{ item.title }}</div>
                    <div class="article-list-time" v-if="item.time">{{ formatTime(item.time) }}</div>
                </div>
            </template>

            <template v-else>
                <el-empty :image-size="200"></el-empty>
            </template>
            <div class="pagination" v-if="total && pageSize < total">
                <el-pagination :current-page.sync="pageNum" @current-change="handleCurrentChange" :page-size="pageSize"
                    layout="prev, pager, next, jumper" background :total="total">
                </el-pagination>
            </div>
        </div>
</template>

<script>
export default {

    props: ['activeId'],
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            contentList: [],
            total: 0,
            loading: false,
        }
    },

    mounted() {
        this.init()
    },

    methods: {

        init() {
            this.pageNum = 1;
            this.getArticleList();

        },

        handleCurrentChange(val) {
            this.pageNum = val;
            this.getArticleList();
        },

        async getArticleList() {
            if (typeof this.activeId !== 'number') {
                return;
            }
            this.loading = true;
            const { pageNum, pageSize } = this;
            const {
                data: { sorts, total },
            } = await this.$fetch.get(
                `/api/directory-article/list`,
                {
                    directoryId: this.activeId,
                    pageNum,
                    pageSize,
                },
            );
            this.contentList = sorts.map((item) => {
                const { article, ...others } = item;
                return {
                    ...others,
                    ...article,
                };
            });
            this.total = total;
            this.loading = false;
        },

        handleToDetail(item) {
            this.$router.push({
                path: `/article-detail/${item.articleId}`,
            });
        },

        formatTime(time) {
            if (!time) {
                return "";
            }
            const date = new Date(time);
            const year = date.getFullYear();
            const month = `0${date.getMonth() + 1}`.slice(-2); // 补零操作
            const day = `0${date.getDate()}`.slice(-2); // 补零操作

            return `${year}-${month}-${day}`;
        },

    },

    watch: {
        activeId(val, oldVal) {
            if (val !== oldVal) {
                this.init()
            }
        }
    }
}
</script>

<style lang="less" scoped>
.content-item {
    width: 100%;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    line-height: 46px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    border-bottom: 1px solid #efefef;
    overflow: hidden;
    cursor: pointer;

    &:hover {
        color: #3560ab;
    }

    .title {
        flex: 1;
        text-align: left;
        font-style: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
    }

    .article-list-time {
        font-weight: 400;
        font-size: 14px;
        color: #aeaeae;
        text-align: right;
        font-style: normal;
        padding-left: 20px;
        display: flex;
        align-items: center;
    }
}

.pagination {
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}
</style>